<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'

const emits = defineEmits(['showDetail'])
const open = () => {
	ElMessageBox.confirm('确认后将会给所有未发送成员发送提醒通知，是否发送', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消'
	})
		.then(() => {
			ElMessage({
				type: 'success',
				message: '发送成功'
			})
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '提醒失败'
			})
		})
}

const tableData = [
	{
		id: 1,
		massContent: '群发内容',
		sendType: '发送类型',
		src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
		sendTime: '2022',
		sendname: '测试',
		createdBy: '马云',
		creatorDepartment: '技术部门',
		sentMembers: '0',
		deliveryCustomers: '1',
		memberNotSent: '2',
		customerNotSent: '3',
		operation: ''
	},
	{
		id: 2,
		massContent: '群发内容',
		src: '',
		sendType: '发送类型',
		sendTime: '2022',
		sendname: '测试',
		createdBy: '马云',
		creatorDepartment: '技术部门',
		sentMembers: '4',
		deliveryCustomers: '5',
		memberNotSent: '6',
		customerNotSent: '7',
		operation: ''
	},
	{
		id: 3,
		massContent: '群发内容',
		src: '',
		sendType: '发送类型',
		sendTime: '2022',
		sendname: '测试',
		createdBy: '马云',
		creatorDepartment: '技术部门',
		sentMembers: '7',
		deliveryCustomers: '8',
		memberNotSent: '3',
		customerNotSent: '4',
		operation: ''
	},
	{
		id: 4,
		massContent: '群发内容',
		src: '',
		sendType: '发送类型',
		sendTime: '2022',
		sendname: '',
		createdBy: '马云',
		creatorDepartment: '技术部门',
		sentMembers: '5',
		deliveryCustomers: '6',
		memberNotSent: '7',
		customerNotSent: '8',
		operation: ''
	}
]
</script>

<template>
	<!-- table 部分-->
	<div>
		<el-table
			:data="tableData"
			style="width: 100%; border-radius: 10px"
			:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
			:cell-style="{ fontSize: '14px', padding: '20px 0' }"
		>
			<el-table-column prop="massContent" label="群发内容" width="200">
				<template #default="scope">
					<div style="display: flex; align-items: center" v-if="scope.row.src !== ''">
						<div>
							<div style="color: #409eff">[共5条数据]</div>
							<el-avatar shape="square" :src="scope.row.src" />
						</div>
						<span style="margin-left: 10px">{{ scope.row.massContent }}</span>
					</div>
					<div v-if="scope.row.src === ''">
						<div style="color: #409eff">[共5条数据]</div>
						<div>测试</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="sendType" label="发送类型"> </el-table-column>

			<el-table-column prop="sendTime" label="发送时间"> </el-table-column>
			<el-table-column prop="sendname" label="群发名称"> </el-table-column>
			<el-table-column prop="createdBy" label="创建人">
				<template #default="scope">
					<div class="app-words-box">
						<div class="app-flex-left">
							<MyIcon class="app-down-icon primary-font" name="Person" />
							<span class="app-gap-words-left-xs">{{ scope.row.createdBy }}</span>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="creatorDepartment" label="创建人所属部门" />
			<el-table-column prop="sentMembers" label="已发送群主" width="110" />
			<el-table-column prop="deliveryCustomers" label="送达群聊" width="110" />
			<el-table-column prop="memberNotSent" label="未发送群主" width="110" />
			<el-table-column prop="customerNotSent" label="未送达群聊" width="110" />
			<el-table-column prop="operation" label="操作" width="150">
				<template #default="scope">
					<ul class="tableOperation">
						<li @click="open">提醒发送</li>
						<li @click="emits('showDetail', scope.row)">详情</li>
					</ul>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<style scoped>
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 20px 60px 20px;
	border-radius: 10px;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
</style>
